<template>
	<view>

		<view class="search-box search">
			<!-- 跳转前一页 -->
			<view style="width: 50upx;margin-right: 3upx;" @tap="backTo">
				<image src="../../static/icon/left.png" style="width: 35upx; height: 50upx; margin:auto;" class="grayscale"></image>
			</view>

			<view class="input-box">
				<!-- 输入框 -->
				<input type="text" adjust-position="true" v-model="keyword" :placeholder="defaultKeyword" placeholder-class="search-text"
				 @confirm="doSearch" confirm-type="search" @input="bindValue" />
				<!-- 清空按钮 -->
				<image src="../../static/search/close.png" @tap="clears" v-if="shows"></image>
			</view>

			<!-- 搜索按钮 -->
			<view class="search-btn" @tap="doSearch">搜索</view>
		</view>


		<!-- 中部 -->
		<view class="screen">
			<view class="screen_list" @tap='openScreen($event)' :style="'color:'+(current == 0 ? colors:'')">
				{{screenName}}
				<text class="iconfont cuIcon-coin down" :style="'color:'+(current == 0 ? colors:'')"></text>
			</view>

			<view class="screen_list" @tap='' :style="'color:'+(current == 0 ? colors:'')">
				{{saleName}}
				<text class="iconfont cuIcon-coin down" :style="'color:'+(current == 0 ? colors:'')"></text>
			</view>

			<view class="screen_list" @tap=''>
				热度
			</view>

			<view class="screen_list" @tap='openPop' :style="'color:' + (current == 3 ? colors:'')" data-index="3">
				筛选
			</view>
			<!-- 弹出筛选框 -->
			<view class="more_screen" :style="'opacity:' + (isMaskShow == true?'1':'0') + ';display:' + (isMaskShow == true?'block':'none')">
				<view v-for="(item, index) in screenList" :key="index" class="more_list" @tap="setScreen(item,index)">
					<text :style="'font-weight:' + (onscreen == index ? 'bold':'500')">{{item.name}}</text>
					<text v-if="onscreen == index" class="iconfont icon-duihao" :style="'color:' + colors + ';'"></text>
				</view>
			</view>

			<!-- 弹出遮罩层1 -->
			<view class="mask" @tap="" catchtouchmove="true" v-if="isMaskShow == true" :style="'top:'+statusBarHeight+';'"></view>

		
		<!-- 弹出筛选框 -->
		<view class="more_screen" :style="'opacity:' + (isMaskShow2 == true?'1':'0') + ';display:' + (isMaskShow2 == true?'block':'none')">
			<view v-for="(item, index) in saleList" :key="index" class="more_list" @tap="setScreen(item,index)">
				<text :style="'font-weight:' + (onscreen == index ? 'bold':'500')">{{item.name}}</text>
				<text v-if="onscreen == index" class="iconfont icon-duihao" :style="'color:' + colors + ';'"></text>
			</view>
		</view>
		
		<!-- 弹出遮罩层1 -->
		<view class="mask" @tap="" catchtouchmove="true" v-if="isMaskShow2 == true" :style="'top:'+statusBarHeight+';'"></view>
		
		

			<!-- 弹出遮罩层2 -->
			<view class="mask" @tap="hideright" catchtouchmove="true" v-if="popShow == true"></view>


			<!-- 点击筛选弹出的右侧弹出窗口 -->
			<view :class="popShow == true ? 'right_popup':'hide_popup'" catchtouchmove="true">
				<scroll-view class="pop_scroll">
					<view class="top_price">
						<text>价 格 区 间</text>
						<text :style="'color:' + colors">请输入价格区间</text>
					</view>
					<view class="input_box">
						<input placeholder="最低价" v-model="lowPrice"></input>
						<text>-</text>
						<input placeholder="最高价" v-model="MaxPrice"></input>
					</view>
					<view v-for="(item, index) in classList" :key="index" class="allClass">
						<view class="classtext">{{item.name}}</view>
						<view class="class_box">
							<!-- 选中分类条件 -->
							<view v-for="(row, indexs) in item.child" :key="indexs" class="class_tag" :style="'color:' + (row.current == true ?  '#fff':'#333') + ';background:' + (row.current == true ? colors:'') + ';border-color:' + (row.current == true ? colors:'') + ';'"
							 @tap="setClass(item,row,index,indexs)">
								{{row.name}}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="bottom_btn">
					<view class="reset" :style="'color:' + colors + ';border-color:' + colors" @tap="onreset">重置</view>
					<view class="enter" :style="'background:' + colors" @tap="onenter">确定</view>
				</view>
			</view>
		</view>




		<!-- 商品列表 -->
		<scroll-view scroll-y  style="width: 750upx; margin-top: 10upx; height: calc(100vh - 210upx)" v-if="productsList.length!=0">
			<view class="flex justify-around bg-white roun" v-for="(item,index) in productsList" :key="index" style="padding: 20upx 20upx 5upx 20upx; 
						border-bottom: 0.8upx solid #e7e7e7; margin-bottom: 10upx; "
			 @tap="goDetail(item)">
				<!-- 左部 -->
				<view style="width: 250upx;" class="flex align-center">
					<image :src="item.skuImg!=''?item.skuImg:item.brandImg" style="width: 2500upx; height: 250upx;"></image>
				</view>
				<!-- 右部 -->
				<view class="flex flex-direction" style="width: 400upx; height: 380upx; padding-top: 2upx;">

					<view style="font-weight: bold; font-size: 30upx; ">
						<view class="cu-tag bg-gradual-red round" style="font-weight: 600;;">{{item.brandName}}</view>
						<view style="font-weight: 600;margin-top: 20upx; ">
							<text v-html="item.skuTitle"></text>
						</view>
					</view>

					<view style="margin-bottom: 10upx;">
						<view style="font-size: 200%; margin-top: 20upx; margin-bottom: 20upx;">
							<text class="cu-tag sm bg-red radius">小编推荐</text>
							<text class="cu-tag sm bg-orange radius" style="margin-left: 20upx;">假一赔十</text>
						</view>
						<view style="font-size: 120%;;" class="flex justify-between ">
							<text style="color: red;">{{item.skuPrice}}</text>
							<text style="color: orange;">已买1000+</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="nocart flex flex-direction" v-else>
			<view class="iconfont" style="color:red;">
				<image src="../../static/icon/nogoods-active.png" style="height: 200upx; width: 200upx;" />
			</view>
			<view style="margin-top: 180upx; color: gray; font-weight: bold;">空空如也</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import search from '../../components/public/search.vue'
	import loading from "../../components/public/loading.vue";
	export default {
		data() {
			return {
				defaultKeyword: "", // 默认搜索关键字String
				keyword: "", // 用户输入String
				shows: false,
				catalog3Id: '',
				productsList: [],

				statusBarHeight: '400upx',
				onscreen: 0,
				colors: 'red',
				modes: true,
				current: 0,
				
				isMaskShow: false,
				popShow: false,
				
				isMaskShow2: false,
				
				lowPrice:'',
				MaxPrice:'',

				classList: [ {
					name: '品牌',
					id: 2,
					child: [{
						name: '红富士',
						id: 1
					}, {
						name: '冰糖橙',
						id: 2
					}, {
						name: '草莓',
						id: 2
					}]
				}],

				screenList: [{
					name: '综合',
					id: 0
				}, {
					name: '价格升序',
					id: 1
				}, {
					name: '价格降序',
					id: 2
				}],
				screenName: '综合',
				
				saleList: [{
					name: '综合',
					id: 0
				}, {
					name: '销量升序',
					id: 1
				}, {
					name: '销量降序',
					id: 2
				}],
				saleName: '综合',
				
			}
		},
		onLoad(options) {
			if(options.hasOwnProperty('catalog3Id')){
				let classId = options.catalog3Id
				this.catalog3Id = classId
				this.showGoodsList()
				this.loadDefaultKeyWord()
			}else{
				this.keyword = options.keyword
				this.onsearch()
			}
		},
		computed:{
			skuPrice(){
				return this.lowPrice+'_'+this.MaxPrice
			}
		},
		methods: {

			loadDefaultKeyWord() {
				this.defaultKeyword = '苹果'
			},

			// 前一页
			backTo() {
				uni.switchTab({
					url:'goods'
				})
			},

			setList() {
				this.modes = !this.modes
			},

			// 清空输入框
			clears() {
				this.keyword = ''
				this.shows = false
			},

			// 综合，价格升降序
			setScreen(item, index) {
				this.onscreen = index
				this.screenName = item.name
				this.isMaskShow = false // 隐藏
				this.onsearch()
			},

			// 展开综合
			openScreen(e,i) {
				let index = e.currentTarget.dataset.index
				this.current = index
				if(i!=undefined){
					switch(i){
						case 1:
							this.isMaskShow2 = !this.isMaskShow2
							break;
					}
				}else{
					this.isMaskShow = !this.isMaskShow
				}
			},
			//-----------------------------
			// 展开筛选
			openPop() {
				this.popShow = true
			},

			//选择项
			setClass(item, row, index, indexs) {
				row.current = !row.current
				console.log(row.current)
				item.child[indexs] = row;
			},

			//确认筛选条件
			onenter() {
				this.popShow = false
				let select = [] // 选中项集合
				this.classList.forEach(e => {
					e.child.forEach(ele => {
						if (ele.current == true) {
							select.push(ele)
						}
					});
				})
				console.log('选中的项', select)
				this.onsearch(select)
			},
			//-------------------------------
			// 展示数据
			async showGoodsList() {
				var res = await this.$request({
					url: 'front/search/list.html',
					params: {
						catalog3Id: this.catalog3Id
					},
					type: 'GET'
				})
				this.productsList = res.data.product
			},

			// 商品详情
			async goDetail(item) {
				uni.navigateTo({
					url: `./goodsDetail?skuId=${item.skuId}`
				})
			},

			// 单击黑色区域,隐藏侧边栏
			hideright() {
				this.popShow = false
			},
			// 单击黑色区域,隐藏价格综合
			closeScreen() {
				this.isMaskShow = false
			},

			// 搜索
			doSearch() {
				if (this.keyword == '' && this.defaultKeyword == '') { // 输入框和默认值都为空
					uni.showToast({
						title: '请输入要搜索的内容',
						icon: 'none'
					})
					return;
				}
				if (this.keyword == '') { // 输入框为空，但默认值不为空
					this.keyword = this.defaultKeyword
				}
				uni.showLoading({
					title: '搜索中'
				})
				// 访问接口
				this.onsearch()
			},

			// 访问接口，拿到数据
			async onsearch(select) {
				uni.hideLoading()
				if(select != undefined && select.length!=0 ){
					this.keyword = select[0].name
				}
				
				var params = {}
				
				params['keyword'] = this.keyword
				
				if(this.skuPrice!='_'){
					console.log(typeof(this.skuPrice))
					console.log('价格区间',this.skuPrice)
					params['skuPrice'] = this.skuPrice
				}
				
				if(this.screenName!='综合'){
					if(this.keyword==''){
						delete params.keyword
					}
					console.log(this.screenName)
					if(this.screenName == '价格升序'){
						params['sort'] = 'skuPrice'+'_asc'
					}else{
						params['sort'] = 'skuPrice'+'_desc'
					}
				}
				
				let res = await this.$request({
					url: 'front/search/list.html',
					params: params,
					methods: 'GET'
				})
				console.log(res)
				this.productsList = res.data.product // 刷新页面
			},

			// input绑定输入的keyword
			bindValue(e) {
				this.keyword = e.detail.value
				this.shows = e.detail.value != '' ? true : false // 是否显示清空按钮
			},

			onreset() { //重置筛选条件
				let data = this.classList;
				data.forEach(e => {
					e.child.forEach(ele => {
						ele.current = false;
					});
				});
				this.classList = data,
					this.popShow = false
			},
		}
	}
</script>



<style>
	.search-box {
		background-color: rgb(242, 242, 242);
		padding: 15upx 2.5%;
		display: flex;
		justify-content: space-between;
		position: sticky;
		top: 0;
	}

	.search-box .mSearch-input-box {
		width: 100%;
	}

	.search-box .input-box {
		width: 85%;
		flex-shrink: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-box .search-btn {
		width: 15%;
		margin: 0 0 0 2%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		font-size: 24upx;
		color: #fff;
		background: linear-gradient(to right, #ff0000, #ff0000);
		border-radius: 60upx;
	}

	.search-box .input-box>input {
		width: 95%;
		height: 60upx;
		font-size: 24upx;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		margin: 0;
		background-color: #ffffff;
	}

	.placeholder-class {
		color: #9e9e9e;
	}

	.search-keyword {
		width: 100%;
		background-color: rgb(242, 242, 242);
	}

	.keyword-list-box {
		height: calc(100vh - 110upx);
		padding-top: 10upx;
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
	}

	.keyword-entry-tap {
		background-color: #eee;
	}

	.keyword-entry {
		width: 94%;
		height: 80upx;
		margin: 0 3%;
		font-size: 30upx;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1upx #e7e7e7;
	}

	.keyword-entry image {
		width: 60upx;
		height: 60upx;
	}

	.keyword-entry .keyword-text,
	.keyword-entry .keyword-img {
		height: 80upx;
		display: flex;
		align-items: center;
	}

	.keyword-entry .keyword-text {
		width: 90%;
	}

	.keyword-entry .keyword-img {
		width: 10%;
		justify-content: center;
	}

	.keyword-box {
		height: calc(100vh - 110upx);
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
	}

	.keyword-box .keyword-block {
		padding: 10upx 0;
	}

	.keyword-box .keyword-block .keyword-list-header {
		width: 94%;
		padding: 10upx 3%;
		font-size: 27upx;
		color: #333;
		display: flex;
		justify-content: space-between;
	}

	.keyword-box .keyword-block .keyword-list-header image {
		width: 40upx;
		height: 40upx;
	}

	.keyword-box .keyword-block .keyword {
		width: 94%;
		padding: 3px 3%;
		display: flex;
		flex-flow: wrap;
		justify-content: flex-start;
	}

	.keyword-box .keyword-block .hide-hot-tis {
		display: flex;
		justify-content: center;
		font-size: 28upx;
		color: #6b6b6b;
	}

	.keyword-box .keyword-block .keyword>view {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 38upx;
		padding: 0 20upx;
		margin: 10upx 20upx 10upx 0;
		height: 60upx;
		font-size: 24upx;
		background-color: rgb(242, 242, 242);
		color: #6b6b6b;
		line-height: 60upx;
	}

	.search_text {
		font-size: 24upx;
		color: #B6B6C6;
	}

	.input-box {
		position: relative;
		height: 60upx;
		font-size: 24upx;
		border: 0;
		border-radius: 60upx;
		-webkit-appearance: none;
		appearance: none;
		padding: 0 3%;
		margin: 0;
		background-color: #ffffff;
	}

	.input-box image {
		height: 40upx;
		width: 40upx;
		float: right;
		position: absolute;
		right: 2%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 100;
	}

	.nohistory {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.classList {
		width: 100%;
		height: 100%;
	}

	.top_nav {
		min-height: 240upx;
		width: 100%;
		background-color: #FFFFFF;
		border-bottom: 1upx solid rgba($color: #eee, $alpha: 0.6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 200;
	}

	.space {
		width: 100%;
		height: 240upx;
		background-color: #F8F8F8;
		/* #ifdef APP-PLUS */
		height: 280upx;
		/* #endif */
	}

	.status_bar {
		width: 100vw;
		overflow: hidden;
		display: block;
		background-color: #FFFFFF;
		z-index: 900;
	}

	.scroll_box {
		height: calc(100vh - 260upx);
	}

	.search_box {
		padding: 0 20upx;
		z-index: 900;
		height: 80upx;
		width: 100%;
		padding-top: 30upx;
		position: relative;
		display: flex;
		align-items: center;

		.backTo {
			color: #202020;
			z-index: 20;
			margin-right: 30upx;
			width: 8%;
			text-align: center;

			text {
				font-size: 34upx;
			}
		}

		.search {
			/* #ifndef MP */
			width: 90%;
			/* #endif */
			/* #ifdef MP */
			width: 60%;
			/* #endif */
			z-index: 900;

			.input-box {
				width: 100%;
				height: 60upx;
				background-color: #f5f5f5;
				position: relative;
				display: flex;
				align-items: center;
				border-radius: 30upx;
				z-index: 900;
			}

			.input-box .icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 10upx;
				right: 20upx;
				width: 40upx;
				height: 40upx;
				font-size: 32upx;
				color: #c0c0c0;
			}

			.search image {
				width: 40upx;
				height: 40upx;
				display: block;
			}

			.input-box input {
				padding-left: 28upx;
				height: 28upx;
				font-size: 28upx;
			}
		}
	}

	.search_box .bg {
		width: 100%;
		height: 100%;
		background-color: #fff;
		position: absolute;
		top: 0;
		left: 0;
	}

	.screen {
		height: 80upx;
		line-height: 80upx;
		display: flex;
		align-items: center;
		padding: 0 10upx;
		z-index: 900;
		position: relative;
		background-color: #fff;
	}

	.screen .screen_list {
		flex: 1;
		text-align: center;
		font-size: 28upx;
		color: #333;
		font-weight: 500;

		.down {
			margin-left: 10upx;
		}
	}

	.screen_list text {
		font-size: 24upx;
		font-weight: normal;
	}

	.more_screen {
		width: 100%;
		padding: 0 60upx;
		border-bottom-left-radius: 20upx;
		border-bottom-right-radius: 20upx;
		position: absolute;
		background-color: #fff;
		top: 80upx;
		left: 0;
		padding-bottom: 20upx;
		opacity: 0;
		transition: all 0.3s;
	}

	.more_list {
		height: 80upx;
		line-height: 80upx;
	}

	.more_list .iconfont {
		float: right;
	}

	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 800;
	}

	/* 右侧弹出框 */
	.right_popup {
		width: 85%;
		height: 100%;
		position: fixed;
		right: 0;
		top: 0;
		background-color: #fff;
		z-index: 920;
		transition: all 0.3s;
	}

	.hide_popup {
		transition: all 0.3s;
		width: 85%;
		height: 100%;
		position: fixed;
		right: -100%;
		top: 0;
		z-index: 920;
		transition: all 0.3s;
		background-color: #fff;
	}

	.pop_scroll {
		/* #ifndef H5 */
		height: calc(90% - 120upx);
		margin-top: 120upx;
		/* #endif */
		/* #ifdef H5 */
		height: 90%;
		margin-top: 20upx;
		/* #endif */
	}

	.top_price {
		height: 80upx;
		line-height: 80upx;
		display: flex;
		padding: 0 20upx;
	}

	.top_price text {
		flex: 1;
		text-align: center;
		font-size: 28upx;
		font-weight: bold;
		color: #333;
	}

	.input_box {
		padding: 0 30upx;
		height: 60upx;
		line-height: 60upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30upx;
	}

	.input_box text {
		color: #999;
	}

	.input_box input {
		flex: 1;
		max-width: 45%;
		height: 100%;
		background-color: #F7F7F7;
		border-radius: 40upx;
		box-sizing: border-box;
		text-align: center;
		font-size: 24upx;
	}

	.allClass {
		margin-top: 50upx;
		padding: 0 30upx;
	}

	.allClass .classtext {
		font-size: 28upx;
		font-weight: bold;
		color: #333;
	}

	.allClass .class_box {
		margin-top: 30upx;
		overflow: hidden;
	}

	.class_box .class_tag {
		height: 60upx;
		line-height: 60upx;
		padding: 0 20upx;
		font-size: 26upx;
		color: #333;
		border: 1upx solid #999;
		text-align: center;
		border-radius: 30upx;
		float: left;
		margin-right: 20upx;
	}

	.bottom_btn {
		height: 10%;
		display: flex;
		align-items: center;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;
	}

	.bottom_btn view {
		max-width: 45%;
		min-width: 45%;
		height: 60upx;
		line-height: 60upx;
		background-color: #FA436A;
		text-align: center;
		border-radius: 35upx;
		color: #fff;
	}

	.bottom_btn .reset {
		background-color: #fff;
		color: #FA436A;
		border: 1upx solid #FA436A;
	}

	.tow_scroll {
		height: 80upx;
		line-height: 80upx;
		padding: 0 10upx;
		white-space: nowrap;

		.scroll_tags {
			display: inline-block;
			background-color: #FFF8F5;
			color: #202020;
			height: 50upx;
			line-height: 50upx;
			padding: 0 25upx;
			text-align: center;
			font-size: 24upx;
			border-radius: 30upx;
			margin: 0 10upx;
		}
	}

	/* 购物车为空的样式} */
	.nocart {
		text-align: center;
		margin-top: 30vh;
	}

	.nocart .iconfont {
		font-size: 80rpx;
		text-align: center;
	}

	.nocart view {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
	}
</style>
